<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>职位筛选</title>
  <style>
    table {
      width: 100%;
      border-collapse: collapse;
    }
    th, td {
      border: 1px solid #ddd;
      /* padding: 8px; */
    }
    th {
      background-color: #f2f2f2;
      text-align: left;
    }
    td {
      font-size: 12px;
    }
    /* td {
      max-width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    } */
    select[multiple] {
      width: 100px;
      height: 100px;
      padding: 8px;
      border: 1px solid #ddd;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <h1>职位筛选</h1>
  <form id="filter-form">
    <!-- <label for="department">部门:</label>
    <input type="text" id="department" name="department"><br><br>
    <label for="location">地点:</label>
    <input type="text" id="location" name="location"><br><br> -->
    <div>
      <label>等级:</label><br>
      <label><input type="radio" name="dengji" value="中央党群机关">中央党群机关</label>
      <label><input type="radio" name="dengji" value="中央国家行政机关（本级）">中央国家行政机关（本级）</label>
      <label><input type="radio" name="dengji" value="中央国家行政机关省级以下直属机构">中央国家行政机关省级以下直属机构</label>
      <label><input type="radio" name="dengji" value="中央国家行政机关参照公务员法管理事业单位">中央国家行政机关参照公务员法管理事业单位</label></label>
    </div><br>
    <div>
      <label>地点:</label><br>
      <label><input type="checkbox" name="location" value="北京" checked>北京</label>
      <label><input type="checkbox" name="location" value="天津" checked>天津</label>
      <br>
      <label><input type="checkbox" name="location" value="四川" checked>四川</label>
      <label><input type="checkbox" name="location" value="达州">达州</label>
      <br>
      <label><input type="checkbox" name="location" value="重庆" checked>重庆</label>
      <br>
      <label><input type="checkbox" name="location" value="山东" checked>山东</label>
      <label><input type="checkbox" name="location" value="济南">济南</label>
      <label><input type="checkbox" name="location" value="菏泽">菏泽</label>
      <br>
      <label><input type="checkbox" name="location" value="河北" checked>河北省</label>
      <br>
      <label><input type="checkbox" name="location" value="内蒙" checked>内蒙古</label>
      <br>
      <label><input type="checkbox" name="location" value="陕西" checked>陕西省</label>
      <br>
      <label><input type="checkbox" name="location" value="山西" checked>山西省</label>
      <br>
      <label><input type="checkbox" name="location" value="甘肃" checked>甘肃省</label>
      <label><input type="checkbox" name="location" value="江苏" checked>江苏省</label>
    </div><br>

    <div>
      <label>学历:</label><br>
      <label><input type="checkbox" name="xueli" value="不限" checked>不限</label>
      <label><input type="checkbox" name="xueli" value="本科" checked>本科</label>
      <label><input type="checkbox" name="xueli" value="专科" checked>专科</label>
    </div><br>

    <div>
      <label>专业:</label><br>
      <label><input type="checkbox" name="zhuanye" value="不限" checked>不限</label>
      <br>
      <label><input type="checkbox" name="zhuanye" value="工学" checked>工学</label>
      <label><input type="checkbox" name="zhuanye" value="计算机类" checked>计算机类</label>
      <label><input type="checkbox" name="zhuanye" value="软件工程" checked>软件工程</label>
      <br>
      <label><input type="checkbox" name="zhuanye" value="医学">医学</label>
      <label><input type="checkbox" name="zhuanye" value="护理">护理</label>
      <br>
      <label><input type="checkbox" name="zhuanye" value="音乐">音乐</label>
    </div><br>
    <div>
      <label>备注排除:</label><br>
      <label><input type="checkbox" name="paichu_beizhu" value="国有企事业单位" checked>国有企事业单位</label>
      <label><input type="checkbox" name="paichu_beizhu" value="2025届" checked>2025届</label>
      <label><input type="checkbox" name="paichu_beizhu" value="限应届" checked>限应届</label>
      <label><input type="checkbox" name="paichu_beizhu" value="应届高校毕业生" checked>应届高校毕业生</label>
      <label><input type="checkbox" name="paichu_beizhu" value="四级" checked>英语四级</label>
      <label><input type="checkbox" name="paichu_beizhu" value="六级" checked>英语六级</label>
      <label><input type="checkbox" name="paichu_beizhu" value="女性" checked>女性</label>
    </div><br>
    <div>
      <label>服务基层排除:</label><br>
      <label><input type="checkbox" name="paichu_jiceng" value="大学生村官" checked>大学生村官</label>
      <label><input type="checkbox" name="paichu_jiceng" value="三支一扶" checked>三支一扶</label>
      <label><input type="checkbox" name="paichu_jiceng" value="军队服役" checked>军队服役</label>
    </div><br>
    <div>
      <label>排序:</label><br>
      <label><input type="radio" name="sortby" value="__EMPTY_10" checked>招考人数倒序</label>
      <label><input type="radio" name="sortby" value="jingzhengbi">竞争比正序</label>
    </div><br>
    <button type="button" onclick="filterPositions()">筛选</button>
  </form>
  <div id="count"></div>
  <br>
  <table id="positions-table">
    <thead>
      <tr>
        <th>部门代码</th>
        <th>部门名称</th>
        <th>用人司局</th>
        <th>机构性质</th>
        <th>招考职位</th>
        <th>职位属性</th>
        <!-- <th>职位分布</th> -->
        <th>职位简介</th>
        <th>职位代码</th>
        <th>机构层级</th>
        <th>考试类别</th>
        <th>招考人数</th>
        <th>报考人数</th>
        <th>过审人数</th>
        <th>竞争比</th>
        <th>专业</th>
        <th>学历</th>
        <th>学位</th>
        <th>政治面貌</th>
        <th>基层工作最低年限</th>
        <th>服务基层项目工作经历</th>
        <th>是否在面试阶段组织专业能力测试</th>
        <th>面试人员比例</th>
        <th>工作地点</th>
        <th>落户地点</th>
        <th>备注</th>
        <!-- <th>部门网站</th>
        <th>咨询电话1</th>
        <th>咨询电话2</th>
        <th>咨询电话3</th> -->
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
  <script>
    async function filterPositions() {
      // const department = document.getElementById('department').value;
      // const location = document.getElementById('location').value;
      // const departmentSelect = document.getElementById('department');
      // const locationSelect = document.getElementById('location');

      // const department = Array.from(departmentSelect.selectedOptions, option => option.value);
      // const location = Array.from(locationSelect.selectedOptions, option => option.value);
      // const departmentCheckboxes = document.querySelectorAll('input[name="department"]:checked');
      // 地点
      const locationCheckboxes = document.querySelectorAll('input[name="location"]:checked');
      // 专业
      const zhuanyeCheckboxes = document.querySelectorAll('input[name="zhuanye"]:checked');
      // 学历
      const xueliCheckboxes = document.querySelectorAll('input[name="xueli"]:checked');
      // 等级
      const dengjiRadio = document.querySelector('input[name="dengji"]:checked');
      // 排除备注
      const paichu_beizhuCheckboxes = document.querySelectorAll('input[name="paichu_beizhu"]:checked');
      // const department = Array.from(departmentCheckboxes, checkbox => checkbox.value);
      // 服务基层排序
      const paichu_jicengCheckboxes = document.querySelectorAll('input[name="paichu_jiceng"]:checked');
 
      // 排序
      const sortbyRadio = document.querySelector('input[name="sortby"]:checked');

      const location = Array.from(locationCheckboxes, checkbox => checkbox.value);
      const zhuanye = Array.from(zhuanyeCheckboxes, checkbox => checkbox.value);
      const xueli = Array.from(xueliCheckboxes, checkbox => checkbox.value);
      const dengji = dengjiRadio ? dengjiRadio.value : '';
      const paichu_beizhu = Array.from(paichu_beizhuCheckboxes, checkbox => checkbox.value);
      const paichu_jiceng = Array.from(paichu_jicengCheckboxes, checkbox => checkbox.value);
      const sortby = sortbyRadio ? sortbyRadio.value : '';
      const paichu = {};
      if (Array.isArray(paichu_beizhu) && paichu_beizhu.length) {
        paichu.__EMPTY_21 = paichu_beizhu;
      }
      if (Array.isArray(paichu_jiceng) && paichu_jiceng.length) {
        paichu.__EMPTY_16 = paichu_jiceng;
      }
      const response = await fetch('/api/positions', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          dengji,
          qita: {
            __EMPTY_19: location, __EMPTY_11: zhuanye, __EMPTY_12: xueli,
          },
            paichu,
        })
      });

      const positions = await response.json();
      const data = sortby ? positions.sort((x, y) => Number(y[sortby]) - Number(x[sortby])) : positions;
      const filterData = positions.filter(item => item.__EMPTY_10 > 1)
      displayPositions(filterData);
      const count = document.getElementById('count');
      count.innerHTML = `已筛选出 ${positions.length} 条职位,大于1人的职位${filterData.length}条`;
    }

    function displayPositions(positions) {
      const tbody = document.querySelector('#positions-table tbody');
      tbody.innerHTML = '';

      positions.forEach(position => {
        const row = document.createElement('tr');
        row.innerHTML = `
          <td>${position['招考职位由招录机关编报，招录专业、学历等与职位资格条件相关的问题，由招录机关负责解释。']}</td>
          <td>${position.__EMPTY}</td>
          <td>${position.__EMPTY_1}</td>
          <td>${position.__EMPTY_2}</td>
          <td>${position.__EMPTY_3}</td>
          <td>${position.__EMPTY_4}</td>`
          // <td>${position.__EMPTY_5}</td>
          +`<td title="${position.__EMPTY_6}">${position.__EMPTY_6}</td>
          <td>${position.__EMPTY_7}</td>
          <td>${position.__EMPTY_8}</td>
          <td>${position.__EMPTY_9}</td>
          <td>${position.__EMPTY_10}</td>
          <td>${position.baokaorenshu}</td>
          <td>${position.guoshenrenshu}</td>
          <td>${position.jingzhengbi}</td>
          <td title="${position.__EMPTY_11}">${position.__EMPTY_11}</td>
          <td>${position.__EMPTY_12}</td>
          <td>${position.__EMPTY_13}</td>
          <td>${position.__EMPTY_14}</td>
          <td>${position.__EMPTY_15}</td>
          <td>${position.__EMPTY_16}</td>
          <td>${position.__EMPTY_17}</td>
          <td>${position.__EMPTY_18}</td>
          <td>${position.__EMPTY_19}</td>
          <td>${position.__EMPTY_20}</td>
          <td title="${position.__EMPTY_21}">${position.__EMPTY_21}</td> 
          `
          // <td>${position.__EMPTY_22}</td>
          // <td>${position.__EMPTY_23}</td>
  
        tbody.appendChild(row);
      });
    }
  </script>
</body>
</html>